<template>
  <div id="center">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <div id="container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 导入本地数据
import graphData from '@/assets/es-miserables.json';

export default {
  name: 'CenterWithGraph',
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('container');
      const myChart = echarts.init(chartDom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let option;

      myChart.showLoading();
      // 直接使用本地导入的数据
      const graph = graphData;
      myChart.hideLoading();
      graph.nodes.forEach(node => {
        node.label = {
          show: true, // 始终显示标签
          position: 'top', // 标签位置在节点上方
          formatter: '{b}' // 标签内容为节点名称
        };
      });

      // 定义从深红到白色的颜色数组
      const colors = ['#FF0000', '#FF6666', '#FF9999', '#FFCCCC', '#FFFFCC', '#FFFFFF'];

      // 为每个类别设置颜色
      graph.categories.forEach((category, index) => {
        category.itemStyle = {
          color: colors[index]
        };
      });

      option = {
        // title: {
        //   text: '产业链展示',
        //   subtext: 'Circular layout',
        //   top: 'top',
        //   left: 'right'
        // },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: function (params) {
            if (params.dataType === 'edge') {
              // 获取连线的源节点和目标节点名称
              const sourceNode = graph.nodes.find(node => node.id === params.data.source);
              const targetNode = graph.nodes.find(node => node.id === params.data.target);
              return `${sourceNode.name} -> ${targetNode.name} `;
            }
            return params.name;
          }
        },
        legend: [
          {
            data: graph.categories.map((a, index) => ({
              name: a.name,
              textStyle: {
                color: colors[index] // 设置图例项文本颜色与类别颜色一致
              }
            }))
          }
        ],
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '链路传导',
            type: 'graph',
            layout: 'circular',
            circular: {
              rotateLabel: true
            },
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3,
            },
            emphasis: {
              lineStyle: {
                width: 2
              }
            },
            edgeSymbol: ['circle', 'arrow'], // 定义连线的起点和终点符号
            edgeSymbolSize: [4, 10], // 定义连线的起点和终点符号大小
          }
        ]
      };
      myChart.setOption(option);
    },
    handleResize() {
      const chartDom = document.getElementById('container');
      const myChart = echarts.getInstanceByDom(chartDom);
      if (myChart) {
        myChart.resize();
      }
    }
  }
};
</script>

<style lang="scss" scoped>

#center {
  $box-height: 650px;
  $box-width: 800px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: $box-height;
  border-radius: 5px;
  border: 1px solid #ccc; // 添加 1px 宽的灰色实线边框
  padding: 16px;

  .bg-color-black {
    padding: 5px;
    height: $box-height - 30px;
    width: $box-width;
    border-radius: 10px;
  }
  #container {
    border-radius: 10px;
    height: $box-height - 30px;
    width: $box-width;
  }
}
</style>
